<template>
  <div class="container">
    <div class="news-detail">
      <div class="news-detail-title">{{ noticeDetail.title }}</div>
      <rich-text :nodes="content"></rich-text>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import formatRichText from "@/utils/formatRichText";
export default {
  data() {
    return {
      content: "",
    };
  },
  computed: {
    ...mapState({
      noticeDetail: (state) => state.home.noticeDetail,
    }),
  },
  methods: {
    ...mapActions({
      homeNoticeDetail: "home/homeNoticeDetail",
    }),
    toNewsDetail(id) {
      wx.navigateTo({
        url: `/pages/news-detail/index?id=${id}`,
      });
    },
  },
  async mounted() {
    await this.homeNoticeDetail(this.$mp.query.id);
    this.content = formatRichText(this.noticeDetail.content);
  },
};
</script>

<style scoped>
.container {
  height: 100%;
  box-sizing: border-box;
  color: #333;
  font-family: helvetica, "Heiti SC", PingFangSC-Light;
}
.news-detail {
  padding: 20rpx;
}
.news-detail .news-detail-title {
  font-size: 32rpx;
  font-weight: bold;
  line-height: 50rpx;
  padding: 20rpx;
}
</style>